<template>
    <view class="container">
        <!-- 导航栏 -->
        <myNavigation ref="navBar"></myNavigation>

        <!-- 菜篮子模块 -->
        <view class="addFoodList" :class="{ clicked: isClicked }">
            <text class="iconfont">&#xe608;</text>
        </view>

        <!--   底部导航栏 -->
        <view class="nav_bottom iconfont ">
            <view class=" nav_item collection" @tap.stop="collection">
                <view class="icon" :class="{ active: menuPageInfo.isCollection }">{{
                    menuPageInfo.isCollection ? "&#xe8c6;"
                    : "&#xe665;"
                    }}
                </view>
                <view>{{ menuPageInfo.isCollection ? "已收藏" : "收藏" }}</view>
            </view>
            <view class="nav_item uploadWorks" @tap.stop="toUploadOpusPage">
                <view class="icon"> &#xe62e;</view>
                <view class="">传作品</view>
            </view>
            <view class="nav_item share" @tap.stop="share">
                <view class="icon"> &#xe6ba;</view>
                <view class="">分享</view>
            </view>
        </view>

        <!-- 菜谱信息 -->
        <view class="menuInfo_container">
            <!-- 菜谱title -->
            <view class="menu_title">
                <image :src='menuPageInfo.menuInfo.titleImgSrc' mode="aspectFill" />
                <view class="title">{{ menuPageInfo.menuInfo.title }}</view>
                <view class="grade" v-if="menuPageInfo.menuInfo.grade">{{menuPageInfo.menuInfo.grade}}&nbsp;综合评分</view>
            </view>

            <!-- 用户信息 -->
            <view class="author_info">

                <view class="item_l" @tap.stop="toUserInfoPage">
                    <view class="profilePhoto">
                        <image :src='menuPageInfo.authorInfo.profilePhoto' mode="aspectFill" />
                    </view>
                    <view class="author_name">{{ menuPageInfo.authorInfo.authorName }}</view>
                </view>
                <view class="item_r" @tap.stop="follow" v-if="menuPageInfo.authorInfo.authorId !== +userId">
                    <view class="follow " :class="{ isFollow: menuPageInfo.isFollow }">
                        {{ menuPageInfo.isFollow ? "已关注" : " 关注" }}
                    </view>
                </view>
            </view>

            <!-- 菜谱描述  -->
            <view class="menu_des">
                <text>
                    {{ menuPageInfo.menuInfo.des }}
                </text>
            </view>

            <!-- 菜谱材料 -->
            <view class=" ingredient">
                <view class="ingredient_h">
                    <view class="title">用料</view>
                    <!-- 从菜篮子中移除 -->
                    <view class="add_food_list" @tap.stop="addInBag">{{ menuPageInfo.isAddInBag ?
                        "从菜篮子中移除" : "加入菜篮子" }}</view>

                </view>
                <view class="ingredient_items">
                    <block
                        v-for="(          item, index          ) in           menuPageInfo.menuInfo.ingredientList          "
                        :key="index">
                        <view class="ingredient_item">
                            <view class="food_name">{{ item.ingredient }}</view>
                            <view class="food_num">{{ item.num }}</view>
                        </view>
                    </block>
                </view>
            </view>

            <!-- 菜谱步骤 -->
            <view class="menu_step">
                <view class="menu_step_items">
                    <block
                        v-for='(          item, index          ) in           menuPageInfo.menuInfo.menuStepList          '
                        :key="index">
                        <view class="menu_step_item">
                            <view class="content">
                                <view class="title">步骤{{index+1}}</view>
                                <image v-show="item.imgSrc" :src=item.imgSrc mode="aspectFill" />
                                <view class="des">{{ item.des }}</view>
                            </view>
                        </view>
                    </block>
                </view>
            </view>

        </view>

        <!-- 菜谱数据信息 -->
        <view class="menu_data">
            <view class="watching" v-show="menuPageInfo.menuInfo.watching">{{
                menuPageInfo.menuInfo.watching }}浏览</view>
            <view class="collection" v-show="menuPageInfo.menuInfo.collection">{{
                menuPageInfo.menuInfo.collection }}收藏</view>
            <view class="create_date">菜谱创建于{{ menuPageInfo.menuInfo.createDate }}</view>
        </view>

        <!-- 其他人作品 -->
        <view class="other_opus" v-if='menuPageInfo.opusList.length'>
            <view class="opus_h">
                <view class="opus_title">大家都做的这道菜</view>
                <view class="opus_num" @tap.stop="toOpusListPage">{{ menuPageInfo.opusNum }}个作品</view>
            </view>

            <scroll-view :scroll-x="true" class="opus_items">
                <block v-for="(          item, index          ) in           menuPageInfo.opusList          "
                    :key="index">
                    <view class="opus_item" @tap.stop="toOpusInfoPage(item)">
                        <image :src='item.imgSrc[0]' class="opus_img" mode="aspectFill" />
                        <view class="user_info">
                            <view class="profile_photo">
                                <image :src="item.profilePhoto" mode="aspectFill" />
                            </view>
                            <view class="username">{{ item.authorName }}</view>
                        </view>
                        <view class="opus_des">
                            {{ item.des }}
                        </view>
                        <view class="opus_data">
                            <view class="iconfont icon" :class="{ liking: item.isLiking }" :data-likes="item.likes"
                                :data-isLiking="item.isLiking" @tap.stop="liking(item)">
                                &nbsp;{{
                                item.likes
                                }}
                            </view>
                            <view class="opus_date">{{ item.date }}</view>
                        </view>
                    </view>
                </block>
            </scroll-view>
        </view>

        <!-- 作者其他菜谱 -->
        <view class="author_menus" v-if="menuPageInfo.authorMenusList.length">
            <view class="menus_h">
                <view class="menus_title">作者其他菜谱</view>
            </view>

            <scroll-view :scroll-x="true" class="menus_items">
                <!--  -->
                <block v-for="(          item, index          ) in           menuPageInfo.authorMenusList          "
                    :key="index">
                    <view class="menus_item" @tap.stop="toMenuInfoPage(item)">
                        <!--  -->
                        <image :src='item.imgSrc' class="menus_img" mode="aspectFill" />
                        <view class="menus_body">
                            <view class="menus_info">
                                <view class="title">
                                    {{ item.title }}
                                </view>
                                <view class="menus_data">
                                    <view class="grade" v-if="item.grade">{{ item.grade }}分&nbsp;</view>
                                    <view class="opus_num" v-if="+item.favoritesNum!== 0">&nbsp;{{ item.favoritesNum
                                        }}人收藏
                                    </view>
                                </view>
                            </view>
                            <view class="author_info">
                                <view class="profile_photo">
                                    <image :src="menuPageInfo.authorInfo.profilePhoto" mode="aspectFill" />
                                </view>
                                <view class="author_name">{{ menuPageInfo.authorInfo.authorName }}</view>
                            </view>
                        </view>
                    </view>
                </block>
            </scroll-view>
        </view>


        <!--防止底部导航栏遮挡页面内容 -->
        <view class="box"></view>
    </view>
</template>

<script setup>
    import './menuInfo.scss'
    import { ref, onMounted, reactive, inject } from 'vue';
    import Taro, { useRouter } from "@tarojs/taro";
    import myNavigation from '../../../components/myNavigation.vue';

    // 注入配置
    const config = inject('config');
    const baseUrl = config.baseUrl; // 从全局配置中读取 baseUrl


    // 页面数据
    const menuPageInfo = ref({
        authorInfo: {
            authorId: '',
            authorName: '',
            profilePhoto: '',
        },
        // 是否已经加入菜篮子
        isAddInBag: false,

        //是否关注用户
        isFollow: false,


        // 是否收藏该菜谱
        isCollection: " ",
        menuInfo: {
            // title: "",
            // titleImgSrc: "",
            // des: "",
            // grade: '',
            // watching: '',
            // collection: '',
            // createDate: '',
            // // 用料列表
            // ingredientList: [],

            // //菜谱步骤列表
            // menuStepList: [],
            // // 菜谱数据信息数据

        },

        //其他人作品数据

        //其他作品数目
        opusNum: "12334",
        opusList: [
            {
                imgSrc: '',
                profilePhoto: '',
                authorName: 'yizhixi',
                des: '真的太好吃啦',
                isLiking: false,
                likes: '16',
                date: '2024/11/5'
            }
        ],

        //作者其他作品数据
        authorMenusList: [
            {
                "recipeId": 2,
                "title": "可乐鸡翅",
                "tags": "[ \"快手菜\", \"下饭菜\", \"家常菜\"]",
                "authorName": null,
                "imgSrc": "https://i2.chuimg.com/ed35e338873811e6b87c0242ac110003_450w_600h.jpg?imageView2/2/w/660/interlace/1/q/75",
                "grade": "9.5",
                "favoritesNum": "9955"
            }
        ]
    }
    );

    // 加入菜篮子点击事件
    const isClicked = ref(false);

    const addInBag = () => {
        menuPageInfo.value.isAddInBag = !menuPageInfo.value.isAddInBag;
        isClicked.value = !isClicked.value;
        setTimeout(() => {
            isClicked.value = false;
        }, 600);
    }



    // 点赞点击事件
    const liking = (item) => {
        if (item.isLiking) {
            item.likes = (+item.likes) - 1;
            // 取消点赞
            Taro.request({
                url: `${baseUrl}/likes/removeLikes?userId=${userId}&opusId=${item.opusId}`,
                method: 'DELETE',
                header: {
                    'content-type': 'application/json' // 默认值
                },
            })

        } else {
            // 点赞
            item.likes = (+item.likes) + 1
            Taro.request({
                url: `${baseUrl}/likes/addLikes?userId=${userId}&opusId=${item.opusId}`,
                method: 'POST',
                header: {
                    'content-type': 'application/json' // 默认值
                },
            })
        }
        item.isLiking = !item.isLiking
    }


    // 关注作者点击事件

    const follow = () => {
        // 取消关注
        if (menuPageInfo.value.isFollow) {
            Taro.request({
                url: `${baseUrl}/follow/removeFollow?followerId=${userId}&followedId=${menuPageInfo.value.authorInfo.authorId}`,
                method: 'DELETE',
                header: {
                    'content-type': 'application/json' // 默认值
                },
            })

        } else {
            // 
            Taro.request({
                url: `${baseUrl}/follow/addFollow?followerId=${userId}&followedId=${menuPageInfo.value.authorInfo.authorId}`,
                method: 'POST',
                header: {
                    'content-type': 'application/json' // 默认值
                },
            })
        }
        menuPageInfo.value.isFollow = !menuPageInfo.value.isFollow;


        // 后续写关注相关逻辑
    }

    // 收藏菜谱点击事件

    const collection = () => {
        if (menuPageInfo.value.isCollection) {
            Taro.request({
                url: `${baseUrl}/favorite/removeFavorite?recipeId=${recipeId}&userId=${userId}`,
                method: 'DELETE',
                header: {
                    'content-type': 'application/json' // 默认值
                },
            })
        } else {
            Taro.request({
                url: `${baseUrl}/favorite/addFavorite?recipeId=${recipeId}&userId=${userId}`,
                method: 'POST',
                header: {
                    'content-type': 'application/json' // 默认值
                },
            })

        }
        menuPageInfo.value.isCollection = !menuPageInfo.value.isCollection;
    }

    // 导航栏信息
    const navBar = ref(null);
    const navigationHome = () => {
        Taro.switchTab({
            url: '../../../pages/index/index',
        });
    };
    const setNavBar = () => {
        if (navBar.value) {
            navBar.value.navigationHome = navigationHome;
            navBar.value.navigationTitle = menuPageInfo.value.menuInfo.title
        }
    }




    //跳转到全部作品列表页面
    const toOpusListPage = () => {

        Taro.navigateTo({
            url: `../opusList/opusList?recipeId=${recipeId}&title=${menuPageInfo.value.menuInfo.title}&userId=${userId}`
        });
    }

    // 跳转单个作品详细页面
    const toOpusInfoPage = (item) => {
        Taro.navigateTo({
            url: `../opusInfo/opusInfo?opusId=${item.opusId}&userId=${item.userId}&recipeId=${recipeId}&curUserId=${userId}`
        });
    }



    // 跳转到菜谱详细页面
    const toMenuInfoPage = (item) => {
        Taro.navigateTo({
            url: `../menuInfo/menuInfo?recipeId=${item.recipeId}&userId=${userId}`
        });
    }

    // 跳转到用户信息界面
    const toUserInfoPage = () => {
        Taro.navigateTo({
            url: `../userInfo/userInfo?userId=${menuPageInfo.value.authorInfo.authorId}&curUserId=${userId}`
        });
    }

    // 跳转到上传作品界面
    const toUploadOpusPage = () => {
        Taro.navigateTo({
            url: `../uploadOpus/uploadOpus?recipeId=${recipeId}`
        });
    }



    function getData() {
        Taro.request({
            url: `${baseUrl}/recipe?recipeId=${recipeId}&userId=${userId}`,
            header: {
                'content-type': 'application/json' // 默认值
            },
            success: function (res) {
                menuPageInfo.value = res.data.data;
                menuPageInfo.value.opusList.forEach(item => {
                    item.imgSrc = JSON.parse(item.imgSrc);
                });
                menuPageInfo.value.menuInfo.ingredientList = JSON.parse(menuPageInfo.value.menuInfo.ingredientList)
                menuPageInfo.value.menuInfo.menuStepList = JSON.parse(menuPageInfo.value.menuInfo.menuStepList);

                setNavBar();
            }
        })

    }
    // 获取外来搜索值
    const router = useRouter();
    // userId为当前登录用户id
    const { recipeId, userId } = router.params;


    onMounted(() => {

        getData();

    });


</script>